<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name: '材料'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "0">
        <div class="analyItem">
            <p class="analyItemTit tx-center">材料</p>
            <div class="analyItemCon">
                <p class="col-md-4" title="计划总额 = 审计审核后材料成本合计（发包时的成本）"><span class="cLightGray pr8">计划额度</span>{{proDisData !== null && proDisDataPlanMoney !== null ? proDisData.PlanMoney : 0}}</p>
                <p class="col-md-4" title="材料已付 = 已经支付的订单金额合计"><span class="cLightGray pr8">材料已付</span>{{proDisData !== null && proDisData.PaidMoney ? proDisData.PaidMoney : 0}}</p>
                <p class="col-md-4" title="材料在途 = 未接单|配送中|待收货的订单金额合计"><span class="cLightGray pr8">材料在途</span>{{proDisData !== null && proDisData.OnWayMoney ? proDisData.OnWayMoney : 0}}</p>
                <p class="col-md-4" title="材料待付 = 已送达未支付的订单金额合计(包含支付中的订单)"><span class="cLightGray pr8">材料待付</span>{{proDisData !== null && proDisData.WaitPaidMoney ? proDisData.WaitPaidMoney : 0}}</p>
                <p class="col-md-4" title="下单可用 = 材料计划总额 - 材料已付 - 材料在途 - 材料待付"><span class="cLightGray pr8">下单可用</span>{{proDisData !== null && proDisData.MaterialMoney ? proDisData.MaterialMoney : 0}}</p>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">财务</p>
            <div class="analyItemCon">
                <p class="col-md-4" title="材料可用 = 项目可用 - 人工可用"><span class="cLightGray pr8">材料可用</span>{{proDisData !== null && proDisData.BackMoneyToPaid ? proDisData.BackMoneyToPaid : 0}}</p>
                <p class="col-md-4" title="材料在途 = 未接单|配送中|待收货的订单金额合计"><span class="cLightGray pr8">材料在途</span>{{proDisData !== null && proDisData.OnWayMoney ? proDisData.OnWayMoney : 0}}</p>
                <p class="col-md-4" title="材料待付 = 已送达未支付的订单金额合计(不包含支付中的订单)"><span class="cLightGray pr8">材料待付(不含支付中)</span>{{proDisData !== null && proDisData.WaitPaidMoney ?  proDisData.WaitPaidMoney : 0}}</p>
                <p class="col-md-4" title="财务额度 = 材料可用 - 材料在途 - 材料待付(不含支付中)"><span class="cLightGray pr8">财务额度</span>{{proDisData !== null && proDisData.BackMoney ?  proDisData.BackMoney : 0}}</p>
            </div>
        </div>

    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="col-md-4"><span class="cLightGray pr8">可用额度</span>{{proPaymentInfo !== null && proPaymentInfo.CaiLiaoMoney !== null ? proPaymentInfo.CaiLiaoMoney:0}}</p>
                <p class="col-md-4"><span class="cLightGray pr8">计划额度</span>{{proPaymentInfo !== null && proPaymentInfo.SumMaterialMoney !== null ? proPaymentInfo.SumMaterialMoney:0}}</p>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
import { GetProInfoDisStatistics } from '../../Resources/Api/paragraph'
export default {

    data () {
        return {
            proPaymentInfo: null, // 二段获取到的数据
            proDisData: null // 材料详情
        }
    },
    mounted () {
        this.proPaymentInfo = this.$route.query.proPaymentInfo
        this.GetProInfoDisStatistics()
    },
    created () {
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    methods: {
        GetProInfoDisStatistics () {
            GetProInfoDisStatistics({
                orderno: this.leftInfo.orderno
            }).then(results => {
                if (results.data.StatusCode === 0) {
                    this.proDisData = results.data.Body
                }
            }).catch(error => {
                console.log(error)
            })
        }
    }
}
</script>

